<template>
    <!--验证读取路由里面的数据-->
    <!-- {{ $router.options.routes }} -->
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"
        text-color="#fff" @open="handleOpen" @close="handleClose" :router="true">
        <template v-for="item in $router.options.routes">
            <el-menu-item :index="item.path" v-if="item.children === undefined && item.meta.show === true">
                <!--动态获取图标-->
                <component :is="item.meta.icon" class="icons"></component>
                <!--动态赋值-->
                <span>{{ item.meta.title}}</span>
            </el-menu-item>

            <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta.show === true">
                <template #title>
                    <!--动态获取图标-->
                    <component :is="item.meta.icon" class="icons"></component>
                    <span>{{ item.meta.title }}</span>
                </template>
                <el-menu-item-group>
                    <template v-for="child in item.children">
                        <el-menu-item :index="child.path">
                            <component :is="child.meta.icon" class="icons"></component>
                            {{ child.meta.title}}
                        </el-menu-item>
                    </template>
                </el-menu-item-group>
            </el-sub-menu>
        </template>
    </el-menu>
</template>
<script setup>

</script>
<style scoped>
.el-menu-vertical-demo{
    height: calc(100vh - 46px);
}
.icons{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
</style>